{extend name="public/base" /}
{block name="css"}
<style>

  .content {
    padding-top: 50px;
  }

  .single-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .multi-2-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  section > img, p > img {
    max-width: 100%;
  }

  .article-content {
    padding-bottom: 20px;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid">
  <img style="width: 100%" src="https://u-res.oss-cn-chengdu.aliyuncs.com/web/UJGC/article/mobile/banner_gsdt.png"/>

  <div style="margin: 15px;color: #343434; font-size: 14px">
    <a style="color: #343434" href="{$Request.root.true}">首页</a> / <a style="color: #343434"
                                                                      href="{$Request.root}/news">公司动态</a> /
    {$article.title}
  </div>

  <div class="content" style="margin: 15px;padding: 20px 15px 0;border: 1px solid #CCCCCC">
    <div>
      <h4 style="line-height: 25px">{$article['title']}</h4>
      <div style="margin-top: 20px;color: #999999;font-size: 12px">类别：{$category['name']} <span style="margin: 0 10px">编辑：{$article['author']} </span>
        时间：{$article['publish_time']}
      </div>
      <hr style="margin: 20px 0;border: 0;height: 1px;background: #ccc">
      <div class="article-content">{$article['content']|raw}</div>
      {gt name="$prev['id']" value="0"}
      <div style="text-align: left;display: flex;"><span style="min-width: 50px;font-size:14px;">上一篇</span>：<a
          class="single-text" style="font-size: 14px;color: #333333" href="{$Request.root}/article/{$prev['id']}.html">{$prev['title']}</a>
      </div>
      {/gt}
      {gt name="$next['id']" value="0"}
      <div style="margin:10px 0 15px;text-align: left;display: flex"><span
          style="min-width: 50px;font-size:14px;">下一篇</span>：<a class="single-text"
                                                                style="font-size: 14px;color: #333333"
                                                                href="{$Request.root}/article/{$next['id']}.html">{$next['title']}</a>
      </div>
      {/gt}
    </div>
  </div>

  <div class="content" style="margin: 20px 15px;padding: 15px 15px 0;border: 1px solid #CCCCCC">
    <h4 style="font-size: 22px;color: #1C2957;text-align: left">相关文章</h4>
    <hr style="margin: 20px 0;border: 0;height: 1px;background: #ccc">
    <div style="display: flex;flex-direction: column;padding-bottom: 20px">
      {volist name="relevant" id="v"}
      <a href="{$Request.root}/article/{$v.id}.html"
         style="color: #333333;text-align: left;margin-bottom: 8px;font-size: 15px">{$v.title}</a>
      {/volist}
    </div>
  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/echo/1.4.0/echo.js" /}
<script>
  $('#nav').find('ul > li').eq(7).addClass('nav-active');
  $("#nav").scrollLeft(65 * 7);

  initWxShare('{$article.title}', '{$article.summary}');

  const imgDom = document.querySelectorAll('img');
  for (let i = 0; i < imgDom.length; i++) {
    if (imgDom[i].src.match("jpg")) {
      imgDom[i].src = `${imgDom[i].src}?x-oss-process=image/format,jpg/interlace,1`;
    }
  }

  Echo.init({
    offset: 0,
    throttle: 0
  });
</script>
{/block}